<template>
  <div class="home">
      <div class="left">
          <router-link to="/home/message" tag="div">留言管理</router-link>
          <router-link to="/home/user" tag="div">用户管理</router-link>
          <router-link to="/home/page" tag="div">父子传参</router-link>
          <router-link to="/home/father" tag="div">子父传参</router-link>
          <router-link to="/home/sync" tag="div">响应式传参 .sync</router-link>
          <router-link to="/home/slot" tag="div">插槽 .slot</router-link>
          <router-link to="/home/mysass" tag="div">css预处理语言.mysass</router-link>
          <router-link to="/home/bro" tag="div">兄弟组件</router-link>
          <router-link to="/home/pro" tag="div">祖孙组件</router-link>
          <router-link to="/home/ref" tag="div">祖孙组件</router-link>
          <router-link to="/home/other" tag="div">补充说明</router-link>
          <router-link to="/home/table" tag="div">表格</router-link>
          <router-link to="/home/form" tag="div">表单</router-link>
          <router-link to="/home/zuoye" tag="div">作业</router-link>
          <router-link to="/home/update" tag="div">上传</router-link>
          <router-link to="/home/keep" tag="div">内置组件</router-link>
          <router-link to="/home/ani" tag="div">动画</router-link>
          <router-link to="/home/vuex" tag="div">vuex</router-link>
          <router-link to="/home/map" tag="div">vuex的辅助函数</router-link>
          <router-link to="/home/mix" tag="div">混入</router-link>
          <router-link to="/home/view" tag="div">vue2的原理和弊端</router-link>
          <router-link to="/home/axios" tag="div">axios</router-link>
          <router-link to="/home/jiekou" tag="div">axios作业</router-link>
          <router-link to="/home/sort" tag="div">axios练习</router-link>
      </div>
      <div class="right">
        
          
          <!-- <keep-alive :include="['keepView']"> -->
            <router-view/>
          <!-- </keep-alive> -->
          <!-- incliude 只有名称匹配的才会被缓存 -->
          <!-- exclude 名称匹配的不会被缓存 -->
          <!-- max 数字 最大缓存数量 只会缓存最近打开的几个 -->
          <!-- 单独用 不能一起用 -->


      </div>
  </div>
</template>

<script>
// @ is an alias to /src


export default {
  name: 'HomeView',
  components: {
    
  }
}
</script>
<style>
.home{
  width: 100vw;
  /* height: 100vh; */
  display: flex;
}
.left{
  width: 200px;
  background-color: rgb(66, 70, 70);
  color: #fff;
  height: 100%;
}
.left div{
  width: 100%;
  height: 45px;
  line-height: 45px;
  text-align: center;
  font-size: 18px;
  cursor: pointer;
}
.left div:hover{
  background-color: antiquewhite;
  color: #000;
}
.right{
  flex: 1;
  /* height: 100%; */
  height: 100vh;
  background-color: antiquewhite;
}
</style>